<template>
  <div class="description">
    <div class="topDisplay">
      <div class="centerComment" @click="_renderComment">
        <div class="commentNum">
          {{descriptionInfo.commentNum > 99 ? '99+' : descriptionInfo.commentNum}}
        </div>
      </div>
      <div
        @click="_handleCatch"
        class='NOcatch'
        :class="isCatch ? 'catch':''"></div>
    </div>
    <div class="info" @click="_renderComment">
      <div class="messgeHead">{{descriptionInfo.raindrop}}</div>
      <div class="messgeCont">{{descriptionInfo.descriptionInfo}}</div>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'Vuex'
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    data() {
      return {
        catch: this.descriptionInfo.is_catch
      }
    },
    props: {
      descriptionInfo: {
        type: Object,
        default() {
          return []
        }
      }
    },
    computed: {
      isCatch: {
        get: function() {
          return this.catch ? true : false
        },
        set: function(type) {
          this.catch = type
        }
      }

      // ...mapGetters([
      //   'isShowComment'
      // ])
    },
    methods: {
      ...mapActions({
        _handleShowComment: '_isShowComment'
      }),
      //catch
      async _handleCatch() {
        this.isCatch = !this.isCatch
        const params = {
          sid: Cookie.get('sid'),
          user_id: this.descriptionInfo.user_id,
          tag_id: this.descriptionInfo.tag_id,
          is_catch: this.isCatch ? 1 : 0
        }
        const res = await api.setCatchUser(params)
        // console.log(res)
        if (res.status == 0) {
          this.discover = res.data
          if (this.isCatch) {
            Toast('Successfully caught')
          } else {
            Toast('Cancelled Raindrop catch')
          }

        } else {
          Toast(res.info)
        }
      },

      // 拉取评论
      async _renderComment() {
        const params = {
          sid: Cookie.get('sid'),
          uid: this.descriptionInfo.user_id,
          tag_id: this.descriptionInfo.tag_id,
          pageSize: 15,
          showAvatar: 1
        }
        let res = await api.getCommentList(params)
        this._handleShowComment()
        // console.log(res)
        if (res.status == 0) {
          const data = res.data
          data.list.forEach((item, index) => {
            if (item.ctime) {
              data.list[index].ctime = item.ctime * 1000
            }
          })
          this.$store.commit('_setcommentList', data)
        } else {
          Toast(res.info)
        }
      }
    }

  }
</script>
<style scoped lang="scss">
  div {
    height: auto;
  }

  .description {
    position: relative;
    width: 100%;
    height: 15.6%;
    border-radius: 0 0 48px 48px;
    background-color: #ffffff;
    z-index: 10;

    .topDisplay {
      width: 100%;
      height: 36px;
      position: absolute;
      top: -36px;
      left: 0;
      z-index: 3;
      border-radius: 16px 16px 0 0;
      background-color: #ffffff;

      .centerComment {
        position: absolute;
        left: 50%;
        top: -8px;
        z-index: 3;
        margin-left: -57px;
        width: 114px;
        min-height: 28px;
        border-radius: 14px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .commentNum {
          width: 60px;
          line-height: 36px;
          padding-left: 20px;
          font-size: 20px;
          font-weight: 500;
          color: rgba(178, 184, 191, 1);
          position: relative;
          text-align: center;

          &:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 10px;
            width: 20px;
            height: 20px;
            z-index: 4;
            background: url("../../assets/images/4.png") no-repeat center;
            -webkit-background-size: cover;
            background-size: cover;
          }
        }
      }

      .NOcatch {
        position: absolute;
        top: -54px;
        right: 60px;
        width: 112px;
        height: 112px;
        border-radius: 50%;
        background: url("../../assets/images/15.png") no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;

        &.catch {
          background-image: url('../../assets/images/14.png');
        }
      }
    }

    .info {
      padding: 0 32px;
      display: flex;
      flex-direction: column;

      .messgeHead {
        font-size: 40px;
        font-weight: bold;
        max-width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .messgeCont {
        padding-top: 10px;
        width: 100%;
        height: 68px;
        font-size: 28px;
        font-family: BentonSans-Regular;
        line-height: 32px;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: rgba(0, 0, 0, .4);
      }


    }
  }
</style>
